<template>
  <div class="erci">
    <top></top>
    <div v-loading='loading' style="padding: 20px;">

      <div class="kflexbc" style="margin-bottom: 20px;">
        <div>
          <el-button type="danger" round @click="logkai()">新增商品ID</el-button>
        </div>
      </div>

      <div class="kflexc">
        <el-select v-model="all.channel" style="width: 250px; margin-right: 20px;" placeholder="所属渠道">
          <el-option v-for="item in qudaos" :label="item.name" :key="item.id" :value="item.id"></el-option>
        </el-select>
        <el-button type="danger" round @click="search">搜索</el-button>
      </div>

      <el-table :data="list" border style="width: 100%; margin: 20px 0;" ref="multipleTable" >
        <el-table-column align='center' prop='spuid' label="商品ID"></el-table-column>
        <el-table-column align='center' prop='name' label="添加人"></el-table-column>
        <el-table-column align='center' prop='created_at' label="添加时间"></el-table-column>
        <el-table-column align='center' prop='channel_name' label="所属渠道"></el-table-column>
        <el-table-column align='center' label="操作" width="250px">
          <template slot-scope="scope">
            <el-button type="text" style="margin-left: 0;" size="mini" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination style="text-align: right;" background layout="total,prev, pager, next" :current-page="all.page" @current-change="fanye" :page-size="all.page_size" :total="total"></el-pagination>
    </div>
    <el-dialog title="新增商品" center :visible.sync="log" width="440px"  :close-on-click-modal="false" :close-on-press-escape="false">

        <div class="kflexc" style="margin-top: 20px;"  >
          <el-select v-model="all2.channel" style="width: 400px;" placeholder="所属渠道">
            <el-option v-for="item in qudaos" :label="item.name" :key="item.id" :value="item.id"></el-option>
          </el-select>
        </div>

        <div class="kflexc" style="margin-top: 20px;">
          <el-input type="textarea" :rows="5" placeholder="请输入商品ID（可输入多个ID，用逗号，分隔开)" style="width: 400px;" v-model="all2.spuid"></el-input>
        </div>

    	  <span slot="footer" class="dialog-footer">
          <el-button type="info" round @click="log = false">取消</el-button>
          <el-button type="danger" round @click="shangchuan">确定</el-button>
    	  </span>
    </el-dialog>



  </div>
</template>

<script>
  import top from '../top.vue'
  import axios from 'axios'
  import moment from "moment";
  import XLSX from 'xlsx';
  import {
      read,utils
    } from 'xlsx'

  export default {
    components:{
      top
    },
    name: "erci",
    data() {
      return {
        qudaos:[
          {id:"1",name:"京东"},
          {id:"2",name:"拼多多"},
          {id:"3",name:"有赞"},
          {id:"4",name:"天猫"},
          {id:"5",name:"快手"},
          {id:"6",name:"抖音"},
          {id:"7",name:"小红书"}
        ],
        list:[],
        all:{
          page:1,
          page_size:20,
          channel:""
        },
        total:0,
        log:false,
        all2:{
          id:"",
          channel:"",// 所属渠道：1-京东、2-拼多多、3-有赞、4-天猫、5-快手、6-抖音、7-小红书
          spuid:""
        }
      }
    },
    created() {
      //店铺权限问题
			this.shopid = JSON.parse(localStorage.getItem('SHOP')).shop_id;
      this.getlist()

    },
    mounted() {

    },
    methods: {


      logkai:function(item){
        if(item){
          this.all2 = {
            id:item.id,
            channel:item.channel,
            spuid:item.spuid
          }
          this.huoquziduan()

        }else{
          this.all2 = {
            id:"",
            channel:"",
            spuid:""
          }
        }
        this.log = true
      },

      search: function() {
        this.all.page = 1
        this.getlist()
      },

      //翻页
      fanye: function(page) {
        this.all.page = page
        this.getlist()
      },

      shangchuan:function(){
        axios.post('/api/plan-market/admin/spuid/add',this.all2)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success(`操作成功`);
              this.getlist()
              this.log = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },

      //获取列表
      getlist: function() {
        axios.get('/api/plan-market/admin/spuid/list',{params:this.all})
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data.data
              this.total = response.data.data.total
              this.loading = false

            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },

      del(row){
        this.$confirm('是否确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('/api/plan-market/admin/spuid/delete',{
            id:row.id
          })
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message.success(`操作成功`);
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .erci {
    /deep/ .el-input-group__append{ border: 0;}
    .powertop {
    	display: flex;
    	background:#f9f9f9;
    }
    .powertopli {
    	flex-basis: 180px;
    	line-height: 50px;
    	border-bottom: 3px #F9F9F9 solid;
    	color: #727272;
    	border-right: 1px #F9F9F9 solid;
    	font-size: 16px;
    	text-align: center;
    }
    .router-link-active {
    	background: #FFFFFF;
    	border-bottom: 3px #2974FF solid;
    }
    /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        color: #fff;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #2974FF;
    }
    /deep/ .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .btn-prev{ border-radius: 14px; padding: 0 10px;}
    /deep/ .btn-next{ border-radius: 14px; padding: 0 10px;}

    /deep/ .el-table th{ background: rgb(246, 246, 246);}
    /deep/ .el-input__inner,/deep/ .el-textarea__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(247, 248, 250);  border: 0;}
    /deep/ .el-date-editor .el-range-input{ background: rgb(247, 248, 250); }
    /deep/ .el-button{ padding: 11px 23px !important;}
    /deep/ .el-button--mini{ padding: 6px 15px !important;}
    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
    .team {
    	background: #F9F9F9;
    }
  }
</style>
